<template>
  <div class="patientFile">
    <Row :gutter="16">
      <Button type="primary" icon="plus-round" @click="addPatientAction">新增患者</Button>
      <i-form :model="formItem" :label-width="80" class="from">
        <Form-item class="item">
          <Input v-model="formItem.query" placeholder="输入患者姓名/手机号" style="width:200px;margin-right:5px"></Input>
          <Input v-model="formItem.id" placeholder="输入病人卡号" style="width: 200px" @on-keyup.enter="search"></Input>
        </Form-item>
        <Button type="primary" shape="circle" icon="ios-search" class="item" @click="search"></Button>
      </i-form>
    </Row>
    <Row :gutter="16">
      <i-table ref="table" border :content="self" :columns="columns" :data="data"></i-table>
    </Row>
    <Row :gutter="16" class="page">
      <Page show-total :current.sync="current" :total="dataCount" :page-size="10" @on-change="changePage" show-elevator></Page>
    </Row>
    <Modal title="新增患者" :width="800" v-model="addShow" :loading="addLoading" @on-ok="addPatientSubmint" :styles="{top: '50px'}">
      <add-patient ref="addP"></add-patient>
    </Modal>
    <Modal title="修改患者" :width="800" v-model="updateShow" :loading="updateLoading" @on-ok="updatePatientSubmint" :styles="{top: '50px'}">
      <update-patient ref="updateP" :formValidate="updateFrom"></update-patient>
    </Modal>
    <Modal title="开药" :width="1200" v-model="makeShow" @on-ok="makeSubmint" >
      <make ref="make"></make>
    </Modal>
  </div>
</template>

<script>
import patient from "@/api/patientFile.js";
import addPatient from "./patientFile/addPatient";
import updatePatient from "./patientFile/updatePatient";
import make from "./patientFile/make";
export default {
  name: "patientFile",
  components: {
    addPatient,
    updatePatient,
    make
  },
  data() {
    return {
      self: this,
      formItem: {
        type: "",
        id: ""
      },
      dataCount: 0,
      current: 1,
      columns: [
        {
          title: "姓名",
          key: "username"
        },
        {
          title: "性别",
          key: "sex"
        },
        {
          title: "邮件",
          key: "email"
        },
        {
          title: "病案号",
          key: "id"
        },
        {
          title: "手机号",
          key: "phone"
        },
        {
          title: "年龄",
          key: "age"
        },
        {
          title: "症状",
          key: "symptom"
        },
        {
          title: "诊断结果",
          key: "result"
        },
        {
          title: "登记日期",
          key: "createTime",
          width:100,
          render: (h, { row }) => h("p", row.createTime.split(" ")[0])
        },
        {
          title: "操作",
          key: "do",
          width: 180,
          align: "center",
          render: (h, { row }) => {
            return h("p", [
              h(
                "Button",
                {
                  props: { size: "small", type: "warning" },
                  on: {
                    click: () => {
                      this.updatePatientAction(row.id);
                    }
                  },
                  style: { marginRight: "5px" }
                },
                [
                  h("Icon", {
                    props: { type: "edit" },
                    style: { marginRight: "3px" }
                  }),
                  h("span", "修改")
                ]
              ),
              h(
                "Button",
                {
                  props: { size: "small", type: "success" },
                  on: { click: () => {this.makeAction();this.actId=row.id} }
                },
                [
                  h("Icon", {
                    props: { type: "compose" },
                    style: { marginRight: "3px" }
                  }),
                  h("span", "病人开药")
                ]
              )
            ]);
          }
        }
      ],
      data: [],
      addShow: false,
      addLoading: true,
      updateShow: false,
      updateLoading: true,
      updateFrom: {},
      makeShow:false,
      actId:''
    };
  },
  methods: {
    search() {
      patient
        .dossierList({
          pageIndex: this.current,
          pageSize: 10,
          ...this.formItem
        })
        .then(data => {
          this.dataCount = data.data.total;
          this.data = data.data.records;
        });
    },
    changePage() {
      this.search();
    },
    addPatientAction() {
      this.addShow = true;
    },
    addPatientSubmint() {
      this.$refs.addP
        .handleSubmit()
        .then(data => {
          this.addShow = false;
          this.search();
        })
        .catch(() => {
          this.addLoading = false;
        })
        .finally(() => {
          this.addLoading = true;
          this.updateShow = false;
        });
    },
    updatePatientAction(id) {
      patient.SelectPatient({ id: id }).then(data => {
        this.updateFrom = data.data;
        this.updateShow = true;
        console.log(this.updateFrom);
      });
    },
    updatePatientSubmint(){
      this.$refs.updateP
        .handleSubmit(this.updateFrom)
        .then(data => {
          this.updateShow = false;
          this.search();
        })
        .catch(() => {
          this.updateLoading = false;
        })
        .finally(() => {
          this.updateLoading = true;
        });
    },
    makeAction(){
      this.makeShow=true
    },
    makeSubmint(){
      this.$refs.make.submit(this.actId)
    }
  },
  mounted() {
    this.search();
  }
};
</script>

<style lang="less" scoped>
.patientFile {
  .tableIcon {
    margin-right: 2px;
  }
  .from {
    float: right;
    display: flex;
    justify-content: flex-end;
    .item {
      margin-right: 15px;
    }
  }
  .page {
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
  }
}
</style>
